<template>
	<view style="border-top: 1rpx solid #9e9e9e;background-color: #fff;" >
		<view class="detail" style="margin-top: 20rpx;">
			<u-cell title="商户名" :value="detail.shopName">
				<u-icon slot="right-icon" name="arrow-right" />
			</u-cell>
			<u-cell title="开始时间" :value="detail.start">
				<u-icon slot="right-icon" name="arrow-right" />
			</u-cell>
			<u-cell title="结束时间" :value="detail.end">
				<u-icon slot="right-icon" name="arrow-right" />
			</u-cell>
			<u-cell title="收款类型" :value="detail.type">
				<u-icon slot="right-icon" name="arrow-right" />
			</u-cell>
			<u-cell title="应收金额" :value="detail.amount">
				<u-icon slot="right-icon" name="arrow-right" />
			</u-cell>
			<u-cell title="收款状态">
				<view slot="value" class="">
					{{ detail.isReceivePayment == '0' ? '结算中' : '已结算'}}
				</view>
			</u-cell>
			<u-cell title="收据" v-if="detail.isReceivePayment == 1">
				<image slot="value" lazy-load="true" :src="detail.sign" style="width: 250rpx;" @tap.top="showImage(detail.sign)" mode="widthFix"></image>
			</u-cell>
		</view>
		
		<view class="list">
			<view class="thead"  style="background: #fff; border-radius: 12rpx; box-shadow: 0 2rpx 8rpx #eee; padding: 24rpx; display: flex; align-items: center;">
				<view style="flex: 1; text-align: center;">
					<text style="font-weight: bold;">日期</text>
				</view>
				<view style="flex: 1; text-align: center;">
					<text style="font-weight: bold;">签名</text>
				</view>
			</view>
			<view class="_tbody">
				<view v-for="item in orders" :key="item.id" @click="getOrder(item.id)" style=" background: #fff; border-radius: 12rpx; box-shadow: 0 2rpx 8rpx rgb(214, 215, 217); padding: 48rpx 24rpx; display: flex; align-items: center;">
					<view style="flex: 1; text-align: center;">
						<text style="font-weight: bold;">{{ item.date }}</text>
					</view>
					<view style="flex: 1; text-align: center;">
						<image style="width: 100rpx;" lazy-load="true" :src="item.sign" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<canvasView class="canvas-view"  ref="canvas" @renderOver="renderOver" :detail="detail"   />
		
		<view class="buttons">
			<view class="print" @tap.stop="print">
				打印收据
			</view>
			<view class="upload" @click="upload">
				上传照片
			</view>
			<view class="download" @tap.stop="download">
				下载表格
			</view>
		</view>
		<u-popup :closeable="true" :close-on-click-overlay="true" @close="closeAdd" :show="showAdd" :round="10" mode="center" z-index="99" overlayStyle="z-index:90">
			<view class="" style="width: 600rpx;min-height: 100rpx;">
				<view class="title">订单详情</view>
				<order-detail :order-id="orderId"></order-detail>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
	  getSettlementDetail,
	  updateSettlement,
	  exportExel
	} from '@/api/mine/settlement.js'
	import { uploadFile } from '../../../api/login'
	import { getDetail } from '@/api'
	import orderDetail from '../../index/components/OrderDetail.vue'
	import canvasView from '../../index/components/canvasView.vue'
import { parseDate } from '../../../utils/utils'
	export default {
	  data() {
	    return {
	      id: null,
	      orders: [],
	      detail: {
			  shopName:null
		  },
		  showAdd:false,
		  orderId:null,
		  loadAll:false
	    }
	  },
	  components:{
		  orderDetail,
		  canvasView
	  },
	  onLoad({
	    id
	  }) {
		  uni.showLoading({
		  	title:'加载中'
		  })
		  // this.loadAll = false
	    this.id = id
	    this.getDetail()
		setTimeout(()=>{
			uni.hideLoading()
			// this.loadAll = true
		},600)
	  },
	  methods: {
	    async getDetail() {
	      const res = await getSettlementDetail(this.id)
		  res.data.orders.forEach(item=>{
			  if(item.sign!= null){
				  item.sign = item.sign.replace("http://192.168.1.110:8080","http://d8565248.natappfree.cc")
			  }
		  })
		  res.data.settlement.sign = res.data.settlement.sign.replace("http://localhost:8080","http://d8565248.natappfree.cc")
		  this.$nextTick(()=>{
			  this.detail = res.data.settlement
			  console.log('this.detail: ',this.detail);
			  this.orders = res.data.orders
		  })
	      console.log(res)
	    },
		getOrder(id) {
			this.orderId = id
			this.showAdd = true
		},
		closeAdd(){
			this.orderId = null
			this.showAdd = false
		},
		print() {
		  setTimeout(()=>{
		  	this.$refs.canvas.$refs.renderRef.h2cRenderDom();
		  },3000)
		
		  this.$modal.msg('打印功能暂未实现')
		},
		renderOver(e){
			console.log(e)
		},
		upload(){
			let _ = this
			if(this.detail.isReceivePayment != '0'){
				this.$modal.msg('账单已结算')
				return false
			}
			uni.chooseImage({
				count:1,
				success:res=>{
					console.log("filePath===>",res.tempFilePaths[0])
					uploadFile({
						filePath: res.tempFilePaths[0]
					}).then((res)=>{
						console.log(res)
						if(res.code == 200){
							let data = {
								sign :res.url,
								receivePaymentDate:parseDate(new Date),
								isReceivePayment:'1',
								id:_.detail.id
							}
							return updateSettlement(data)
						}
					}).then(res=>{
						console.log(res)
					})
				}
			})
		},
		showImage(url){
			uni.previewImage({
				urls:[url]
			})
		},
		async download(){
			const res = await exportExel(this.detail)
			console.log("res===>",res);
		}
	  }
	}
</script>

<style lang="scss" scoped> 
._tbody{
	height: auto;
	overflow: scroll;
	padding-bottom: 110rpx;
}
.buttons{
	// border-top: 1rpx solid #9e9e9e;
	box-shadow: rgb(214, 215, 217) 0px 1px 4px;
	display: flex;
	height: 100rpx;
	// padding-bottom: 20rpx;
	line-height: 100rpx;
	width: 100%;
	background-color: #fff;
	color: #000;
	position: fixed;
	bottom:0;
	.print{
		border-top-left-radius: 15rpx;
		border-bottom-left-radius: 15rpx;
		flex: 1;
		background-color: yellowgreen;
		color: #fff;
		text-align: center;
	}
	.upload{
		flex: 1;
		text-align: center;
		color: #fff;
		background-color: orangered;
		
	}
	.download{
		flex: 1;
		text-align: center;
		color: #fff;
		background-color: $uni-color-paragraph;
		border-top-right-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}
	
}
.canvas-view{
		// position: absolute;
		// right:-230rpx;
		// top: 300rpx;
		position: fixed;
		top: 9999px;
		right: 100%;
		
	}
</style>